<template>
    <div class="top-menu-wrapper">
        <ul>
            <li>
                <span
                v-for="it in topMenuList"
                :key="it.code"
                v-show="!it.hide"
                :class="checkedMenu !== it.code ? 'top-menu' : 'top-menu-checked'"
                @click="PickTopMenu(it)">{{ it.name }}</span>
            </li>
        </ul>
    </div>
</template>
<script>
import { mapActions } from 'vuex'
import MenuApi from '@/api/base/menu'

export default {
  data () {
    return {
      topMenuList: [
        // {
        //   name: '系统管理',
        //   code: 'default',
        //   access: 'system',
        //   hide: false,
        //   type: 'menu'
        // },
        // {
        //   name: '文档中心',
        //   code: 'system',
        //   access: 'system',
        //   hide: false,
        //   type: 'url',
        //   url: 'http://www.baidu.com'
        // }
      ],
      checkedMenu: ''
    }
  },
  methods: {
    ...mapActions([
      'changeTopMenu'
    ]),
    PickTopMenu (menu) {
      this.checkedMenu = menu.code
      if (menu.type === 'menu') {
        console.log(menu)
        this.changeTopMenu(menu.code)
      } else if (menu.type === 'url') {
        window.open(menu.url)
      }
    },
    setTopMenuList (list) {
      list.map(menu => {
        const menuData = {
          name: menu.menuName,
          code: menu.code,
          access: menu.code,
          hide: !(menu.isShow === '1'),
          type: 'menu'
        }
        this.topMenuList.push(menuData)
      })
      
      // 设置默认首菜单
      this.checkedMenu = this.topMenuList[0].code
    }
  },
  mounted () {
    MenuApi.top().then(res => {
      const list = res.data.data
      this.setTopMenuList(list)
      // this.topMenuList = list
    })
  }
}
</script>
<style lang="less">
@import './top-menu.less';
</style>
